<template>
  <div class="enjoy-tree-table">
<!--    :indent="30"-->
    <el-table
      ref="treeTable"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      @select-all="selectAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="id"
        label="序号"
        sortable
        width="180">
        <template slot-scope="scope">
          <span :class="{'column-padding': !scope.row.children && ((scope.row.id+'').length == 1) }">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        children: [{
          id: 21,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 211,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 222,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 22,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 311,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 322,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

    }
  },
  methods:{
    selectAll(e){
      console.log(e)
      // this.$nextTick(()=>{
      //   this.$refs.treeTable.toggleAllSelection()
      // })


    }
  }
}
</script>

<style scoped>

 .enjoy-tree-table ::v-deep .el-table--border .el-table__cell:first-child .cell{
 /*padding-left: 20px;*/
}
 .column-padding{
   padding-left: 23px;
 }
 /*::v-deep .el-table__indent{*/
 /*  position: relative;*/
 /*}*/
 /*::v-deep .el-table__indent:before{*/
 /*   content: '';*/
 /*   position: absolute;*/
 /*   left: 50%;*/
 /*   top: 0;*/
 /*   border-left: 1px dashed red;*/
 /*   width: 1px;*/
 /*   height: 100%;*/
 /*}*/

 ::v-deep .el-icon-arrow-right:before{
   content:'\e791'
 }
</style>
